@mixin wh ($width, $height) {
    display: block;
    width: $width;
    height: $height;
}

@mixin flex-variant($display, $direction: false, $align: false, $justify: false, $wrap: false) {
    display: $display;

    @if $direction {
        flex-direction: $direction;
    }

    @if $align {
        align-items: $align;
    }

    @if $justify {
        justify-content: $justify;
    }

    @if $wrap {
        flex-wrap: $wrap;
    }

    // fix
    & > * {
        min-width: 0;
    }
}

@mixin flex($direction: false, $align: false, $justify: false, $wrap: false){
    @include flex-variant(flex, $direction: $direction, $align: $align, $justify: $justify, $wrap: $wrap);
}

@mixin vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@mixin centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin ellipsis($rowCount: 1){
    @if $rowCount <= 1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
    @else {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $rowCount;
        -webkit-box-orient: vertical;
    }
}

@mixin border-1px($direction, $color: $color-border-line){
    position: relative;
    &::after{
        content: '';
        position: absolute;
        background: $color;
        @if $direction == left {
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            transform: scaleX(0.5);
            transform-origin: left 0;
        }
        @if $direction == right {
            right: 0;
            top: 0;
            height: 100%;
            width: 2px;
            transform: scaleX(0.5);
            transform-origin: right 0;
        }
        @if $direction == top {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            transform: scaleY(0.5);
            transform-origin: left 0;
        }
        @if $direction == bottom {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            transform: scaleY(0.5);
            transform-origin: left 0;
        }
    }
}

@mixin gray() {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}